<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <link rel="stylesheet" href="__PUBLIC__/member/style/common.css" media="screen"/>
        <script type="text/javascript" src="__PUBLIC__/common/js/jquery.js"></script>
        <script type="text/javascript" src="__PUBLIC__/common/js/common.js"></script>
        <script type="text/javascript" src="__PUBLIC__/pano/pano.js"></script>
        {:W("Easyui")}
        {:W("Uploader")}
        <script type="text/javascript">
            var open = 0;
            var ds = "{$row['devices']}";
            function checksb(){
                var result = true;
                if(result == true){
                    result = AutoCheckSub(".cs");
                }
                if(result == true){
                    var target_id = $("#target_id").val();
                    if(target_id == "0"){
                        showMsg("请选定目标场景！");
                        result = false;
                    }
                }
                return result;
            }
            $(function(){
                $('.dd').tooltip({
                    position: 'right'
                });
                windowready();
                $(".tool_x").click(function(){
                    if(open == 0){
                        opentool();
                    }else{
                        closetool();
                    }
                });
                opentool();
                $(window).resize(function(){
                    windowready();
                });
            });
            function windowready(){
                var win_h = $(window).height();
                var ac_w = $(".action_pano").width();
                var hh = win_h - 140;
                $(".action_pano").height(hh);
                $("#toolbox").height(hh - 20);
                $(".tool_page").height(hh - 30);
                if(open == 0){
                    var ww = ac_w - 2;
                }else{
                    var ww = ac_w - 410;
                }
                if(ds == "mobile"){
                    $("#pano").css("left","410px");
                }else{
                    $("#pano").width(ww);
                }
            }
            function closetool(){
                $("#toolbox").stop().animate({"left":"-402px"},500);
                $(".tool_x").addClass("c");
                var ac_w = $(".action_pano").width();
                var ww = ac_w - 2;
                if(ds == "mobile"){
                    $("#pano").stop().animate({"left":"2px"},500);
                }else{
                    $("#pano").stop().animate({"width":ww+"px"},500);
                }
                open = 0;
            }
            function opentool(){
                $("#toolbox").stop().animate({"left":"0px"},500);
                $(".tool_x").removeClass("c");
                var ac_w = $(".action_pano").width();
                var ww = ac_w - 410;
                if(ds == "mobile"){
                    $("#pano").stop().animate({"left":"410px"},500);
                }else{
                    $("#pano").stop().animate({"width":ww+"px"},500);
                }
                open = 1;
            }
        </script>
        <style type="text/css">
            .chengbox{
                width: auto; height: 24px; overflow: hidden; border-radius : 5px; text-indent: 10px;
                background: #fffbf3;margin: 5px; font: 12px/24px "微软雅黑"; color: #FFA900; cursor: default;
            }
            .action_title{
                margin-bottom: 10px;
            }
            .action_pano{
                width: 100%; height: auto; overflow: hidden; position: relative;
            }
            #pano{
                 overflow: hidden; position: absolute; z-index: 5; right: 0px;
            }
            .flash{
                width: 100%; height: 100%;
            }
            .mobile{
                width: 320px; height: 480px;
            }
            #toolbox{
                width: 400px; height: auto; top: 10px; left: -400px; background: url(__PUBLIC__/member/images/common/page.png); position: absolute; z-index: 10; border: 1px solid #aaa;
            }
            .tool_x{
                width: 20px; height: 20px; overflow: hidden; cursor: pointer;
                background: url("__PUBLIC__/member/images/index/arrow.png") no-repeat; position: absolute; right: 2px; top: 50%;
            }
            .tool_x.c{
                right: -22px; background-position: 0 -20px;
            }
            .tool_page{
                width: 370px; height: 100%; overflow: auto; background: url(__PUBLIC__/member/images/common/page.png); margin-top: 5px; margin-left: 5px;
            }
            .father{
                width: auto; height: 20px; overflow: hidden; border:1px solid #c6c6c6; background: #f3f3f3; float: left;
                font: bold 12px/20px "微软雅黑"; color: #333; text-align: center; margin-right: 4px; cursor: pointer;
                border-radius: 4px; padding: 0 4px; margin-top: 2px; margin-bottom: 2px;
            }
            .father.me{
                border-color: #ff9600; background-color: #ffbc00; color: #F60;
            }
        </style>
        <script type="text/javascript">
            function panoready(){
                var krpano = document.getElementById("krpano");
                krpano.call("set(plugin[ui_{$cid}].ondown,action(dragui));");
            }
            function changeCenter(va){
                setSpotcenter("#spot_edgebox",va);
                setSpotcenter("#spot_edge",va);
                var krpano = document.getElementById("krpano");
                krpano.call("set(plugin[ui_{$cid}].align,"+va+");");
                krpano.call("set(plugin[ui_{$cid}].edge,"+va+");");
                $("#x").val(0);
                $("#y").val(0);
                krpano.call("set(plugin[ui_{$cid}].x,0);");
                krpano.call("set(plugin[ui_{$cid}].y,0);");
            }
            function changeEdge(va){
                setSpotcenter("#spot_edge",va);
                var krpano = document.getElementById("krpano");
                krpano.call("set(plugin[ui_{$cid}].edge,"+va+");");
            }
            function shoot(x,y){
                $("#x").val(x);
                $("#y").val(y);
            }
            function setSpotcenter(me,va){
                $(me).children("input").eq(0).val(va);
                $(me).children(".btn1").removeClass("me");
                $(me).children("."+va).addClass("me");
            }
            $(function(){
                $("#zorder").blur(function(){
                    var krpano = document.getElementById("krpano");
                    var va = $("#zorder").val();
                    krpano.call("set(plugin[ui_{$cid}].zorder,"+va+");");
                });
                $("#x").blur(function(){
                    var krpano = document.getElementById("krpano");
                    var va = $("#x").val();
                    krpano.call("set(plugin[ui_{$cid}].x,"+va+");");
                });
                $("#y").blur(function(){
                    var krpano = document.getElementById("krpano");
                    var va = $("#y").val();
                    krpano.call("set(plugin[ui_{$cid}].y,"+va+");");
                });
                $(".father").click(function(){
                    var id= $(this).data("id");
                    var krpano = document.getElementById("krpano");
                    if(id != ""){
                        var fathername = "ui_" + id;
                    }else{
                        var fathername = "";
                    }
                    krpano.call("set(plugin[ui_{$cid}].parent,"+fathername+");");
                    changeCenter('center');
                    $(".father").removeClass("me");
                    $(this).addClass("me");
                    $("#parent").val(id);
                });
            });
        </script>
    </head>
    <body>
        {:W("Bg")}
        <div id="upmain">
            <div class="main">
                <div class="main_head">
                    <div class="main_head_left"></div>
                    <div class="main_head_right"></div>
                    <div class="main_head_main">
                        <div class="title">全景项目 - {$panorow['title']}</div>
                        <div title="关闭" onclick="DoNote('确认返回功能首页？','{:U('main/index')}');" class="close"></div>
                        <div title="返回上级" onclick="LinkTo('{$backurl}');" class="goback"></div>
                    </div>
                </div>
                <div class="main_mid">
                    <div class="main_mid_left"></div>
                    <div class="main_mid_right"></div>
                    <div class="main_mid_main">
                        <div class="pano_menu">
                            {:W("Panomenu",array("pano_id"=>$pano_id,"num"=>6))}
                        </div>
                        <div class="none_main">
                            <div class="action_main">
                                <div class="action_title">{$panorow['title']} - {$viewrow['title']} - <a href="{$backurl}">场景UI设置</a> - 定位</div>
                                <div class="action_pano">
                                    <div id="pano"  class="{$row['devices']}"></div>
                                    <script type="text/javascript">
                                        embedpano({
                                            id:"krpano",
                                            swf:"__PUBLIC__/pano/pano.swf",
                                            xml:"{:U('positionxml',array('cid'=>$cid))}",
                                            target:"pano",
                                            html5:"auto",wmode:"transparent"
                                        });
                                    </script>
                                    <div id="toolbox">
                                        <div class="tool_x c"></div>
                                        <div class="tool_page">
                                            <form name="form1" action="" onsubmit="return checksb();" enctype="multipart/form-data" method="post">
                                                <input type="hidden" name="dopost" value="save" />
                                                <input type="hidden" name="cid" value="{$cid}" />
                                                <table width="100%" border="0" cellpadding="4" cellspacing="1" align="center">
                                                    <tr height="10">
                                                        <td colspan="2"></td>
                                                    </tr>
                                                    <tr align="center" height="32">
                                                        <td colspan="2"><b>设置UI参数</b></td>
                                                    </tr>
                                                    <tr height="36">
                                                        <td align="right" width="80"><b>元素名称：</b></td>
                                                        <td align="left">
                                                            {$row['title']}
                                                        </td>
                                                    </tr>
                                                    <tr height="36">
                                                        <td align="right" width="70"><b>层级：</b></td>
                                                        <td align="left">
                                                            <input type="text" name="zorder" title="层级大的可以遮挡层级低的" id="zorder" class="easyui-tooltip dd shortinputcube cs" value="{$row['zorder']}" />
                                                        </td>
                                                    </tr>
                                                    <tr height="36">
                                                        <td align="right" width="100"><b>父级元素：</b></td>
                                                        <td align="left">
                                                            <input type="hidden" id="parent" name="parent" value="{$row['parent']}" />
                                                            <div>
                                                                <if condition="$row['parent'] eq 0">
                                                                    <div class="father me" data-id="" >无</div>
                                                                    <else />
                                                                    <div class="father" data-id="" >无</div>
                                                                </if>

                                                                <volist name="uclist" id="father">
                                                                    <if condition="$row['parent'] eq $father['id'] AND $father['id'] neq $row['id']">
                                                                        <div class="father me" data-id="{$father.id}" >{$father.title}</div>
                                                                        <elseif condition="$father['id'] neq $row['id']" />
                                                                        <div class="father" data-id="{$father.id}" >{$father.title}</div>
                                                                    </if>
                                                                </volist>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <tr height="36">
                                                        <td align="right" width="70"><b>UI定位：</b></td>
                                                        <td align="left">
                                                            <div id="spot_edgebox">
                                                                <input type="hidden" id="align" value="{$row['align']}" name="align"/>
                                                                <input type="button" onclick="changeCenter('lefttop');" class="btn1 lefttop" value="左上" />
                                                                <input type="button" onclick="changeCenter('top');" class="btn1 top" value="上" />
                                                                <input type="button" onclick="changeCenter('righttop');" class="btn1 righttop" value="右上" /><br/>
                                                                <input type="button" onclick="changeCenter('left');" class="btn1 left" value="左" />
                                                                <input type="button" onclick="changeCenter('center');" class="btn1 center" value="中" />
                                                                <input type="button" onclick="changeCenter('right');" class="btn1 right" value="右" /><br/>
                                                                <input type="button" onclick="changeCenter('leftbottom');" class="btn1 leftbottom" value="左下" />
                                                                <input type="button" onclick="changeCenter('bottom');" class="btn1 bottom" value="下" />
                                                                <input type="button" onclick="changeCenter('rightbottom');" class="btn1 rightbottom" value="右下" />
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <script type="text/javascript">
                                                        setSpotcenter("#spot_edgebox","{$row['align']}");
                                                    </script>
                                                    <tr height="36">
                                                        <td align="right" width="70"><b>位置：</b></td>
                                                        <td align="left">
                                                            <input type="text" name="x" id="x" class="shortinputcube cs" value="{$row['x']}" />
                                                            <input type="text" name="y" id="y" class="shortinputcube cs" value="{$row['y']}" />
                                                        </td>
                                                    </tr>

                                                    <tr height="10">
                                                        <td colspan="2"></td>
                                                    </tr>

                                                    <tr height="40">
                                                        <td align="right" width="70"><b>缩放：</b></td>
                                                        <td align="left">
                                                            <input class="easyui-slider" style="width:200px" name="scale" id="scale" value="{$row['scale']*100}"
                                                                   data-options="showTip:true,
                                                                   max:200,
                                                                   tipFormatter: function(value){
                                                                   return value+'%';
                                                                   },
                                                                   onChange:function(value){
                                                                   postscale(value);
                                                                   }"
                                                                   />
                                                            <script type="text/javascript">
                                                                function postscale(data){
                                                                    var krpano = document.getElementById("krpano");
                                                                    var realdata = data/100;
                                                                    krpano.call("set(plugin[ui_{$cid}].scale,"+realdata+");");
                                                                }
                                                            </script>
                                                        </td>
                                                    </tr>
                                                    <tr height="40">
                                                        <td align="right" width="70"><b>透明度：</b></td>
                                                        <td align="left">
                                                            <input class="easyui-slider" style="width:200px" name="alpha" id="alpha" value="{$row['alpha']*100}"
                                                                   data-options="showTip:true,
                                                                   tipFormatter: function(value){
                                                                   return value+'%';
                                                                   },
                                                                   onChange:function(value){
                                                                   postalpha(value);
                                                                   }"
                                                                   />
                                                            <script type="text/javascript">
                                                                function postalpha(data){
                                                                    var krpano = document.getElementById("krpano");
                                                                    var realdata = data/100;
                                                                    krpano.call("set(plugin[ui_{$cid}].alpha,"+realdata+");");
                                                                }
                                                            </script>
                                                        </td>
                                                    </tr>
                                                    <tr height="10">
                                                        <td colspan="2"></td>
                                                    </tr>

                                                    <tr height="36">
                                                        <td align="right" width="70"><b>UI旋转中心点：</b></td>
                                                        <td align="left">
                                                            <div id="spot_edge">
                                                                <input type="hidden" id="edge" value="{$row['edge']}" name="edge"/>
                                                                <input type="button" onclick="changeEdge('lefttop');" class="btn1 lefttop" value="左上" />
                                                                <input type="button" onclick="changeEdge('top');" class="btn1 top" value="上" />
                                                                <input type="button" onclick="changeEdge('righttop');" class="btn1 righttop" value="右上" /><br/>
                                                                <input type="button" onclick="changeEdge('left');" class="btn1 left" value="左" />
                                                                <input type="button" onclick="changeEdge('center');" class="btn1 center" value="中" />
                                                                <input type="button" onclick="changeEdge('right');" class="btn1 right" value="右" /><br/>
                                                                <input type="button" onclick="changeEdge('leftbottom');" class="btn1 leftbottom" value="左下" />
                                                                <input type="button" onclick="changeEdge('bottom');" class="btn1 bottom" value="下" />
                                                                <input type="button" onclick="changeEdge('rightbottom');" class="btn1 rightbottom" value="右下" />
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    <script type="text/javascript">
                                                        setSpotcenter("#spot_edge","{$row['edge']}");
                                                    </script>

                                                    <tr height="5">
                                                        <td colspan="2"></td>
                                                    </tr>
                                                    <tr height="40">
                                                        <td align="right" width="70"><b>旋转：</b></td>
                                                        <td align="left">
                                                            <input class="easyui-numberspinner" style="width:80px" name="rotate" id="rotate" value="{$row['rotate']}"
                                                                   data-options="required:true,
                                                                   max:360,
                                                                   onChange:function(value){
                                                                   postrotate(value);
                                                                   }"
                                                                   />
                                                            <script type="text/javascript">
                                                                function postrotate(data){
                                                                    var krpano = document.getElementById("krpano");
                                                                    var realdata = data;
                                                                    krpano.call("set(plugin[ui_{$cid}].rotate,"+realdata+");");
                                                                }
                                                            </script>
                                                        </td>
                                                    </tr>
                                                    <tr height="10">
                                                        <td colspan="2"></td>
                                                    </tr>
                                                    <tr height="40">
                                                        <td align="right" width="70"></td>
                                                        <td align="left">
                                                            <input type="submit" class="blackbutton" value="提交" />
                                                        </td>
                                                    </tr>
                                                </table>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="main_foot">
                    <div class="main_foot_left"></div>
                    <div class="main_foot_right"></div>
                    <div class="main_foot_main"></div>
                </div>
            </div>
        </div>
    </body>
</html>
